<html>
<head>
	<meta charset="UTF-8"/>
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<title>吃货餐厅</title>
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5/themes/metro/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5/themes/mobile.css"/>
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5/themes/icon.css"/>
	<script type="text/javascript" src="js/jquery-easyui-1.5/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui-1.5/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="js/jquery-easyui-1.5/jquery.easyui.mobile.js"></script>
    
    <script type="text/javascript">
	 /*<![CDATA[*/ 
	            
	var msglen=0;
	            
	
	function refresh()
	 {
		 document.getElementById("msg_end").scrollIntoView(); 
		
	 }
	 
	 function getMsg()
	 {
		 
		 var curlen=0;
		 var url = "p_getMsgLen?deskid="+$("#deskid").val();
		 $.ajax(
		 			{
		 	        	url: url,
		 	        	async: false,//改为同步方式
		 	        	type: "GET",
		 	        	success: function (data) {
		 	        		 curlen=Number(data);
		 	 			}
		 	 	});
		 
		
		 
		 var diff= curlen-msglen;
		 if(diff>0)
		 {
			 for(i=0;i<diff;i++)
			 {
			     var j=msglen+i;
				 var url = "p_getMsg?deskid="+$("#deskid").val()+"&index="+j;
				 
				 $.ajax(
				 			{
				 	        	url: url,
				 	        	async: false,//改为同步方式
				 	        	type: "GET",
				 	        	success: function (data) {
				 	        		 if(data!='null')
									 {
				 	        			 var name;
				 	        			 var val;
				 	        			 var text1;
				 	        			 
                                         var arr = data.split("|");
                                         var ctime="<span style=\"color: #7B7B7B;font-size: 15px;font-family:'微软雅黑';\">"+arr[1]+"</span>"
                                         if(arr[0]=='0')
                                         {
                                        	 
                                			 name="<span style=\"color: #009900;font-size: 25px;font-family:'微软雅黑';\">"+$("#desknum").val()+"号桌</span>"
                                		     val="<span style=\"font-size: 20px;font-family:'微软雅黑';\">"+arr[2]+"</span>"
                                			 text1="<table width=\"100%\"><tr><td align=\"left\">"+name+"&nbsp;&nbsp;"+ctime+"</td></tr><tr><td align=\"left\">&nbsp;&nbsp;&nbsp;&nbsp;"+val+"</td></tr></table>"
                                         }else
                                         {
                                        	 name="<span style=\"color: #B8860B;font-size: 25px;font-family:'微软雅黑';\">服务员</span>"
        								     val="<span style=\"font-size: 20px;font-family:'微软雅黑';\">"+arr[2]+"</span>"
        									 text1="<table width=\"100%\"><tr><td align=\"right\">"+ctime+"&nbsp;&nbsp;"+name+"</td></tr><tr><td align=\"right\">"+val+"&nbsp;&nbsp;&nbsp;&nbsp;</td></tr></table>"
                                         }
										 
										 $("#chatdiv").append(text1);   
										 document.getElementById("msg_end").scrollIntoView(); 
										
									 }
				 	 			}
				 	 	});
				
			 }
			 msglen=curlen;
		 }
		 
		 
		  setTimeout(function(){getMsg();}, 1000);
	 }
	 
	 var screeHeight=2048;
	
	$(document).ready(function()
	{
		
		$(window).resize(function() {
			 setTimeout(function(){refresh();}, 100);
			 
			 var curHeight = $(window).height();
			 if(curHeight>screeHeight)
			 {
				 $("#hide").css('display','none');
			 }else
			 {
				 $("#hide").css('display','block');
			 }
			 screeHeight = curHeight;
		});
		
		setTimeout(function(){$("#hide").css('display','none');}, 150);
		
		setTimeout(function(){getMsg();}, 1000);
	
		 $("#chatbtn").textbox({onClickButton:function(e){
			 var text = $("#chatbtn").val();
			 if(text.length==0)
				 return;
			
			 var msg = encodeURIComponent(text);
			 
			 var url = "p_addMsg?deskid="+$("#deskid").val()+"&msg="+msg+"&flag=0";
			  $.get(url, function(data){

					 
					
			  });
			 
			 $("#chatbtn").textbox("setValue", "");
			 $('#chatbtn').textbox('textbox').focus();
			 

		  }});		 
	 });
	 
	/*]]>*/  
	</script>
</head>
<body>
	<div class="easyui-navpanel">
	
        <header>
            <div class="m-toolbar" >
                <div class="m-title">聊天中</div>
                <div class="m-left">
                    <a href="javascript:void(0)" class="easyui-linkbutton m-back" plain="true" outline="true" onclick="history.go(-1)">返回</a>
                </div>
            </div>
        </header>
        
        
        <div style="width:100%;overflow:auto"> 
     		<div id="chatdiv" style="overflow:hidden;width:100%;"></div> 
     		<div id="msg_end" style="height:0px; overflow:hidden"></div> 
     	</div> 
        
        
        
        <footer style="padding:2px 3px">
            <input class="easyui-textbox"  id="chatbtn" style="width:100%;height:40px;" data-options="prompt:'请 输 入',buttonText:'&nbsp;&nbsp;&nbsp;&nbsp;发 &nbsp;&nbsp;&nbsp;&nbsp;送 &nbsp;&nbsp;&nbsp;&nbsp;'"/>
            <div id="hide" style="height:40px;display:none;"></div> 
        </footer>
        
           
	</div>
	<input  id="deskid" type="hidden" th:value="${deskid}" />
	<input  id="desknum" type="hidden" th:value="${desknum}" />
	
</body>
</html>